<style scoped>
.tools .shark {
    padding: 0 30px;
}

.tools .fast {
    font-size: 20px;
    color: #f39312;
    letter-spacing: 1px;
}

.tools .main .ivu-select,
.main .ivu-input {
    border-radius: 0 2px 2px 0;
}

.tools .common-box-body {
    padding-top: 24px;
}

.tools .fixed-bottom {
    padding-left: 30px;
    padding-right: 40px;
    height: 80px;
    line-height: normal !important;
    position: fixed;
    left: 210px;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}

.tools .sidehide {
    left: 75px;
}

.tools .detail {
    margin-top: 20px;
    margin-bottom: 15px !important;
}

.tools .ivu-modal-mask .common-box-body .ivu-modal-body .ivu-form-item {
    text-align: center !important;
}
</style>
<style>
.tools
    .common-box-body
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-placeholder,
.common-box-body
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-selected-value {
    padding-right: 0px;
}

.tools .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
    color: #2d8cf0;
    border-color: transparent;
    background-color: #fff;
}

.tools .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
    color: #808080;
    border: 1px solid #dddee1;
    border-bottom: 0;
}

.tools button.ivu-btn {
    border-radius: 2px !important;
}

.tools.common-box-body .ivu-modal-body .ivu-form-item label {
    text-align: center !important;
}
</style>


<template>
    <div class="tools" id="tools">
        <product-title></product-title>
        <div class="shark" style="padding:0 30px;">
            <div class="fast">快速搜索</div>
            <div class="common-box-body">
                <Form>
                    <Row>
                        <Col :md="24" :lg="6">
                        <Form-item>
                            <DatePicker  format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="选择日期" @on-change="datechange" transfer></DatePicker>
                        </Form-item>
                        </Col>
                        <Col :md="24" :lg="6">
                        <Form-item>
                            <Select placeholder="推送机构" v-model="formdata.yun_org_mid" filterable transfer>
                                <Option value="0">全公司</Option>
                                <Option :value="item.id" :key="item.id" v-for="item in allJG">{{item.shortn}}</Option>
                            </Select>
                        </Form-item>
                        </Col>
                        <Col :md="24" :lg="6">
                        <Form-item>
                            <Input v-model="formdata.name" placeholder="请输入推送对象"></Input>
                        </Form-item>
                        </Col>
                        <Col :md="24" :lg="6">
                        <Button size="large" class="fr" type="primary" icon="ios-search" @click="search">搜索</Button>
                        </Col>
                    </Row>
                    <div style="border-bottom:1px solid #BEBEBE;"></div>
                    <Row style="margin-top:20px;">
                        <Col :md="24" :lg="2" offset='22'>
                        <Button size="large" class="fr" v-if="$isShow('yun_org/create2')" type="warning" icon="plus" @click="addnewdoclist">新增</Button>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table ref="currentRowTable" @on-current-change="tableCurrentChange" size="large" stripe highlight-row border :columns="columns1" :data="policylist" class=""></Table>
                    </div>
                </div>
            </div>
            <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="12">
                    <Button type="error" :disabled="tableaction" size="large" class="fl mr10 " @click="remove">删除</Button>
                    <Button type="info" :disabled="tableaction" size="large" class="fl mr10" @click="toDetail">编辑</Button>
                    </Col>
                    <Col :md="24" :lg="12" class="tRight">
                    <Page :total="totals" ref='pages' :current="currentpage" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                    </Col>
                </Row>
            </div>
        </div>
        <Modal v-model="showAddModal" :mask-closable="false" :closable="false" width="1000" :title="title" class-name="common-box-body tools teshuSelectMultiple" id="showAddModal">
            <Form :model="modalData" ref="modalData" :rules="ruleValimodalData">
                <Row>
                    <Col span="12">
                    <Form-item label="推送对象">
                        <Select placeholder="推送对象" v-model="modalData.eids" filterable transfer remote label-in-value :remote-method="nameArraychange" @on-change="nameArraychange1($event)" :loading="loading2">
                            <Option :value="item.id" v-for="item in allname">{{item.name}}</Option>
                        </Select>
                        <!-- <Select size="large" v-model="modalData.com_mid" placeholder="推送对象" filterable :transfer="true">
                            <Option v-for="(item,index) in cname_list" :value="item.id" :key="item.id">{{item.shortn}}</Option>
                        </Select> -->
                    </Form-item>
                    </Col>
                    <Col span="12">
                    <Form-item label="推送机构">
                        <Select placeholder="推送机构" v-model="modalData.yun_org_mid" filterable transfer>
                            <Option value="全公司">全公司</Option>
                            <Option :value="item.id" :key="item.id" v-for="item in allJG">{{item.shortn}}</Option>
                        </Select>
                    </Form-item>
                    </Col>
                    <Col span="24" v-if="nameArray.length">
                    <Form-item>
                        <template v-for="(item,index) in nameArray">
                            <Tag type="dot" closable color="blue" @on-close="delYun_org_mid(index)">{{item.label}}</Tag>
                        </template>
                    </Form-item>
                    </Col>
                    <Col span="24">
                    <Form-item label="标题" prop="title">
                        <Input v-model="modalData.title" placeholder="请输入标题"></Input>
                    </Form-item>
                    </Col>
                    <Col span="24">
                    <Form-item>
                        <UE :defaultMsg="modalData.content" :config=config ref="content" id="content"></UE>
                    </Form-item>
                    </Col>
                </Row>
            </Form>
            <div slot="footer" :md="24" :lg="8">
                <Button style="width:60px;" type="primary" size="small" @click="cancel">取消</Button>
                <Button style="width:60px;" class="tRight" type="success" size="small" long @click="add">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import productTitle from "../../components/productTitle";
import { message_list,get_emps,mesage_create,message_info,message_remove } from "../../api/app_message";
import { getListByName } from "../../api/basiclaw";
import debounce  from 'lodash.debounce'
import util from '../../libs/util'
import UE from "../UE/ue.vue";

import "../../../static/UEdit/ueditor.config.js";
import "../../../static/UEdit/ueditor.all.js";
import "../../../static/UEdit/lang/zh-cn/zh-cn.js";
import "../../../static/UEdit/ueditor.parse.js";
export default {
    data() {
        return {
            loading2:true,
            allname:[],
            nameArray: [],
            date: [],
            allJG: [],
            config: {
                initialFrameWidth: null,
                initialFrameHeight: 350
            },
            title: "新增展业",
            p: 1, //对页面页数的定义-->初始化
            pagesize: 10, //对页面的定义,出事定义10条数据
            totals: 0,
            showAddModal: false, //点击设置,弹出模态框
            closeable: false, //shif按ese按钮退出
            loading: true,
            tableaction: true,
            currentpage: 1,
            formdata: {
                start_time: "",
                end_time: "",
                yun_org_mid: "",
                name: "",
                p: 1, //对页面页数的定义-->初始化
                pagesize: 10 //对页面的定义,出事定义10条数据
            },
            modalData: {
                yun_org_mid:'',
                eids:"",
                title:'',
                content: ""
            },
            policylist: [],
            columns1: [
                {
                    title: "时间",
                    key: "create_time_n",
                    align: "center",
                    width:200
                },
                {
                    title: "标题",
                    key: "title",
                    align: "center"
                },
                {
                    title: "内容",
                    key: "content",
                    align: "center"
                },
                {
                    title: "推向对象",
                    key: "names",
                    align: "center",
                }
            ],
            ruleValimodalData: {
                title: [
                    {
                        required: true,
                        message: "不能为空"
                        // trigger: 'blur'
                        // pattern: /.+/, trigger: 'change'
                    }
                ],
            },
            current: {}
        };
    },
    components: {
        productTitle,
        UE
    },
    computed: {
        slidetoggle() {
            return this.$store.state.sildeshow;
        }
    },
    created() {
        this.getJG();
        this.getList();
    },
    mounted() {
    },
    methods: {
        getUEContent() {
            this.modalData.content = this.$refs.content.getUEContent();
        },
        // 搜索
        search() {
            this.tableaction = true;
            this.formdata.p = 1;
            this.$refs['pages'].currentPage = 1;
            this.getList();
        },
        // 获取列表
        getList() {
            new Promise((resolve, reject) => {
                message_list(this.formdata)
                    .then(res => {
                        if (res.data.err == 0) {
                            console.log(res, "......");
                            this.policylist = res.data.data.list;
                            this.totals = res.data.data.total;
                            this.tableaction = true;
                            if (this.policylist.length > 0) {
                                for (
                                    var i = 0;
                                    i < this.policylist.length;
                                    i++
                                ) {
                                    if (
                                        this.policylist[i].content.indexOf(
                                            "&nbsp;"
                                        ) != -1
                                    ) {
                                        this.policylist[
                                            i
                                        ].content = this.policylist[
                                            i
                                        ].content.replace(/&nbsp;/g, "");
                                    }
                                }
                            }
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        // 新增
        addnewdoclist() {
            this.current = {};
            this.showAddModal = true;
            this.tableaction = true;
        },
        // 页码改变
        pageChange(page) {
            this.p = page;
            this.formdata.p = page;
            this.getList();
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize;
            this.formdata.pagesize = pagesize;
            this.getList();
        },
        toDetail() {
            this.showAddModal = true;
            var _param = {
                message_id: this.current.id
            };
            new Promise((resolve, reject) => {
                message_info(_param)
                    .then(res => {
                        if (res.data.err == 0) {
                            let array=[];
                            res.data.data.push_to.emps.forEach(item=>{
                                array.push({
                                    label:item.name,
                                    value:item.id
                                })
                            })
                            this.modalData.yun_org_mid = res.data.data.push_to.org_mid;
                            this.modalData.title = res.data.data.title;
                            this.$refs.content.setUEContent(
                                res.data.data.content
                            );
                            this.nameArray = array;
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        // 选中表单的其中一项,进行数据删除处理
        //选中当前行数据
        tableCurrentChange(currentRow, oldCurrentRow) {
            this.tableaction = false;
            this.current = currentRow;
        },
        // 删除数据
        remove() {
            this.$Modal.confirm({
                title: "提示",
                content: "是否要删除该条记录?",
                onOk: () => {
                    var _param = {
                        message_id: this.current.id
                    };
                    console.log(_param, ".._param");
                    new Promise((resolve, reject) => {
                        message_remove(_param)
                            .then(response => {
                                if (response.data.err == 0) {
                                    this.$Message.success(response.data.info);
                                    this.getList();
                                } else {
                                    this.$Message.error(response.data.info);
                                }
                                resolve();
                            })
                            .catch(error => {
                                reject(error);
                            });
                    });
                }
            });
        },
        // creaTE 点击确定弹窗按钮
        add() {
            this.getUEContent();
            this.$refs["modalData"].validate(valid => {
                if (valid) {
                    if (
                        this.modalData.content == "" ||
                        this.modalData.content == null
                    ) {
                        this.$Message.error("请编辑富文本信息");
                        return false;
                    }
                    console.log(this.nameArray.length);
                    console.log(this.modalData.yun_org_mid);
                    if(this.nameArray.length==0&&this.modalData.yun_org_mid==""){
                        this.$Message.error('推送对象与机构不能同时为空');
                        return false;
                    }
                    this.modalData.eids=[];
                    this.nameArray.forEach(item=>{
                        this.modalData.eids.push(item.value);
                    })
                    
                        // 新增
                        this.modalData.eids = this.modalData.eids.join(',');
                        new Promise((resolve, reject) => {
                            mesage_create(this.modalData)
                                .then(response => {
                                    if (response.data.err == 0) {
                                        this.getList();
                                        this.sendMessage(response.data.data.message_id);
                                    } else {
                                        this.$Message.error(response.data.info);
                                        this.loading = false;
                                    }
                                    resolve();
                                })
                                .catch(error => {
                                    reject(error);
                                });
                        });
                } else {
                    this.$Message.error('请完善信息！！！');
                }
            });
        },
        cancel() {
            this.$refs["modalData"].resetFields();
            this.modalData.eids="";
            this.modalData.title='';
            this.nameArray=[];
            this.$refs.content.setUEContent("");
            this.showAddModal = false;
        },
        datechange(val) {
            this.formdata.start_time = val[0];
            this.formdata.end_time = val[1];
        },
        nameArraychange(val) {
            if (val !== '') {
               this.getname(val);
            }else{
                this.loading2=true;
            }
        },
        nameArraychange1(val){
            if(val.value){
                this.nameArray.push(val);
            }
        },
        getname:debounce(function(val){
            let params={
                    name:val
                }
            new Promise((resolve, reject) => {
                get_emps(params).then(res => {
                        if (res.data.err == 0) {
                            this.allname = res.data.data;
                            this.loading2=false;
                        } 
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },1000),
        getJG() {
            new Promise((resolve, reject) => {
                getListByName()
                    .then(res => {
                        if (res.data.err == 0) {
                            this.allJG = res.data.data;
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        delYun_org_mid(val) {
            this.nameArray.splice(val, 1);
            this.modalData.eids.splice(val, 1);
        },
        sendMessage(id){
            let params = {
                type:'2',
                title:this.modalData.title,
                id:id.toString()
            }
            // let url = "https://sandbox.kuaibao365.com/service/third/aurora/tag?tagList=19080"+','+this.modalData.yun_org_mid;
            // let url = "http://192.168.0.11:8280/service/third/aurora/tag?tagList=19080"+(this.modalData.yun_org_mid?','+this.modalData.yun_org_mid:"");
            let url = "https://sandbox.kuaibao365.com/service/third/aurora/tag?tagList="+this.modalData.eids+(this.modalData.yun_org_mid?','+this.modalData.yun_org_mid:"");
            // let url = BASE_URL1+"/service/third/aurora/tag?tagList="+this.modalData.eids+','+this.modalData.yun_org_mid;
            util.ajax.post(url,params).then(res=>{
                if(res.data.data=="推送成功"){
                    this.$Message.success(res.data.data);
                    this.$refs["modalData"].resetFields();
                    this.modalData.eids="";
                    this.modalData.title='';
                    this.nameArray=[];
                    this.$refs.content.setUEContent("");
                    this.showAddModal = false;
                }
                
            })
        }
    }
    
};
</script>